import React, { Component, Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import NotFound from '@/pages/NotFound'
import history from './utils/history'
import Loading from './components/Loading'
// 组件懒加载
const Layout = React.lazy(() => import('@/pages/Layout'))
const Login = React.lazy(() => import('@/pages/Login'))

export default class App extends Component {
  render() {
    return (
      <Suspense fallback={() => <Loading></Loading>}>
        <Router history={history}>
          {/* 等价于 <HashRouter></HashRouter> */}
          <div className="App">
            <Switch>
              {/* 后台布局首页 */}
              <Redirect exact from="/" to="/home"></Redirect>
              <Route path="/home" component={Layout}></Route>
              {/* 登录页面 */}
              <Route path="/login" component={Login}></Route>
              {/* 404页面 */}
              <Route component={NotFound}></Route>
            </Switch>
          </div>
        </Router>
      </Suspense>
    )
  }
}
